<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>统计数值</title>
</head>
<style>

.flex-container{
	display: -webkit-flex;
	display: flex;
	flex-direction: row;
	-webkit-justify-content: space-around;
	justify-content: space-around;
	width: 600px;
	height: 100px;
	background-color: lightgrey;
}

.flex-item {
	background-color: lavenderblush;
	width: 100px;
	/* height: 100px; */
	margin: 10px;
	display: flex;
	flex-direction: column;
}
.item-num{
	/* margin: auto; */
	-webkit-flex: 5;
	flex: 5;
	display: flex;
}
.item-title{
	/* margin: auto; */
	flex: 4;
	display: flex;
}
.span-num{
	margin: auto;
}
.span-title{
	margin: auto;
}
.red{
	color: red;
	font-weight: bold;
}
</style>
<body>

<br><br>

<div class="flex-container">
	<div class="flex-item">
		<div class="item-num">
			<span class="span-num">180</span>
		</div>
		<div class="item-title">
			<span class="span-title">总订单</span>
		</div>
	</div>
	<div class="flex-item">
		<div class="item-num">
			<span class="span-num">120</span>
		</div>
		<div class="item-title">
			<span class="span-title">已完成</span>
		</div>
	</div>
	<div class="flex-item">
		<div class="item-num">
			<span class="span-num red">30</span>
		</div>
		<div class="item-title">
			<span class="span-title">待发货</span>
		</div>
	</div>
	<div class="flex-item">
		<div class="item-num">
			<span class="span-num">30</span>
		</div>
		<div class="item-title">
			<span class="span-title">待签收</span>
		</div>
	</div>
	
</div>

</body>
</html>
